/*
 * @Description: 导航全局操作组件
 * @Author: Rfan
 * @Date: 2022-04-20 19:49:46
 * @LastEditTime: 2022-04-22 14:38:31
 */
import { useMemo, useState } from 'react';
import { Button, Space } from 'antd';
import { useFuncAndNavContext } from '../contexts/FuncAndNavContext';
import AddNavDialog from './dialogs/AddNavDialog';

const PageOperate = () => {
  const { selectItems, deleteNavItem } = useFuncAndNavContext();
  // 添加规则弹窗状态
  const [visible, setVisible] = useState(false);

  const closeAddDialog = () => {
    setVisible(false);
  };

  const delNav = () => {
    deleteNavItem(selectItems);
  };

  return (
    <div className="filter-container">
      <p className="page-title">功能与导航维护</p>
      <Space>
        <Button
          disabled={selectItems.length <= 0}
          danger
          onClick={() => {
            delNav();
          }}
        >
          删除
        </Button>
        <Button
          type="primary"
          onClick={() => {
            setVisible(true);
          }}
        >
          增加功能导航
        </Button>
      </Space>

      {useMemo(
        () => (
          <AddNavDialog visible={visible} onClose={closeAddDialog} />
        ),
        [visible]
      )}
    </div>
  );
};

export default PageOperate;
